import { createStyles } from "antd-style"

const useStyles = createStyles(({ token }) => ({
	container: {
		userSelect: "none",
		height: "100%",
		display: "flex",
		flexDirection: "column",
		overflow: "hidden",
	},
	threadContainer: {
		flex: 1,
		display: "flex",
		gap: "10px",
		flexDirection: "column",
		overflow: "hidden",
	},
	section: {
		flex: 1,
		display: "flex",
		flexDirection: "column",
		overflow: "hidden",
		minHeight: 0,
		borderRadius: 8,
		border: "1px solid rgba(28, 29, 35, 0.08)",
		backgroundColor: "#FFF",
	},
	collapsed: {
		flex: "none",
	},
	header: {
		display: "flex",
		justifyContent: "space-between",
		alignItems: "center",
		height: "40px",
		padding: "0 10px",
		borderBottom: `1px solid ${token.colorBorderSecondary}`,
		flexShrink: 0,
		color: token.colorTextSecondary,
	},
	titleContainer: {
		display: "flex",
		alignItems: "center",
		gap: "10px",
		fontWeight: 400,
	},
	iconButton: {
		padding: 0,
		width: "18px",
		height: "18px",
		display: "flex",
		alignItems: "center",
		justifyContent: "center",
		color: "inherit",
		"&>span": {
			display: "flex",
			alignItems: "center",
		},
	},
	title: {
		fontSize: "14px",
		fontWeight: 500,
		color: token.colorTextSecondary,
	},
	content: {
		flex: 1,
		overflow: "auto",
		padding: "6px",
		minHeight: 0,
		display: "flex",
		flexDirection: "column",
	},
	// collapsed: {
	// 	maxHeight: 0,
	// 	padding: "0!important",
	// 	overflow: "hidden",
	// },
	threadItem: {
		display: "flex",
		alignItems: "center",
		justifyContent: "space-between",
		height: "36px",
		padding: "4px 8px 4px 4px",
		borderRadius: "8px",
		cursor: "pointer",
		marginBottom: "4px",
		"&:hover": {
			backgroundColor: token.colorFillSecondary,
		},
	},
	threadItemSelected: {
		display: "flex",
		alignItems: "center",
		justifyContent: "space-between",
		height: "36px",
		padding: "4px 8px 4px 4px",
		borderRadius: "8px",
		cursor: "pointer",
		backgroundColor: "#f0f6ff",
		color: token.colorPrimary,
		marginBottom: "4px",
	},
	threadItemMoreButton: {
		color: token.colorTextSecondary,
		width: "20px",
		height: "20px",
		marginLeft: "8px",
	},
	threadItemMoreButtonIcon: {
		flex: "none",
		color: "inherit",
	},
	threadTitle: {
		display: "flex",
		alignItems: "center",
		gap: "8px",
		flex: 1,
		minWidth: 0,
	},
	threadTitleImage: {
		flex: "none",
	},
	folderContainer: {
		display: "flex",
		flexDirection: "column",
	},
	folderContent: {
		paddingLeft: 0,
		"& .fileTitle": {
			display: "flex",
			alignItems: "center",
			flexWrap: "nowrap",
		},
	},
	fileItem: {
		height: 36,
		display: "flex",
		alignItems: "center",
		justifyContent: "space-between",
		padding: "4px 8px 4px 4px",
		borderRadius: "6px",
		cursor: "pointer",
		transition: "background-color 0.2s",
		"&:hover": {
			backgroundColor: token.colorFillSecondary,
		},
	},
	fileTitle: {
		display: "flex",
		alignItems: "center",
		gap: "4px",
		flex: 1,
		minWidth: 0,
		color: token.colorTextSecondary,
		".anticon": {
			fontSize: "14px",
		},
		width: "100%",
		overflow: "hidden",
	},
	emptyText: {
		padding: "16px",
		textAlign: "center",
		color: token.colorTextQuaternary,
		fontSize: "14px",
		display: "flex",
		flexDirection: "column",
		alignItems: "center",
		flex: "auto",
		overflow: "hidden",
		justifyContent: "center",
		paddingBottom: "20%",
	},
	emptyTextIcon: {
		marginBottom: "16px",
	},
	ellipsis: {
		overflow: "hidden",
		textOverflow: "ellipsis",
		whiteSpace: "nowrap",
		width: "100%",
		display: "inline-block",
	},
	inlineInput: {
		margin: "0 4px",
		flex: 1,
	},
	searchContainer: {
		marginBottom: "6px",
		flex: "none",
	},
	searchInput: {
		fontSize: "14px",
		".ant-input-prefix": {
			marginRight: "8px",
			color: token.colorTextQuaternary,
		},
	},
	listContainer: {
		flex: "auto",
		overflow: "auto",
	},
	// 新建话题按钮样式
	newTopicButton: {
		display: "flex",
		alignItems: "center",
		justifyContent: "center",
		height: "32px",
		minHeight: "32px",
		maxHeight: "32px",
		flex: "0 0 auto",
		borderRadius: "8px",
		marginBottom: 6,
		cursor: "pointer",
		color: token.colorTextSecondary,
		backgroundColor: token.magicColorUsages.fill[0],
		"&:hover": {
			backgroundColor: token.magicColorUsages.fill[1],
		},
		"&:active": {
			backgroundColor: token.magicColorUsages.fill[2],
		},
	},
	newTopicButtonIcon: {
		marginRight: "8px",
		flex: "none",
	},
	attachmentAction: {
		color: "#747f8d",
		fontSize: "16px",
		flex: "none",
		width: "24px",
		display: "flex",
		justifyContent: "center",
		"&:hover": {
			color: "rgba(28, 29, 35, 0.8)",
		},
	},
	fileNameContainer: {
		flex: 1,
		minWidth: 0,
		overflow: "hidden",
		display: "flex",
		alignItems: "center",
		marginLeft: "4px",
	},
	iconWrapper: {
		width: "24px",
		height: "24px",
		display: "flex",
		justifyContent: "center",
		alignItems: "center",
		flex: "none",
	},
}))

export default useStyles
